<template>
  <div>
    <my-header></my-header>
    <div class="content">
      <div class="content_left">
        <div class="content_left_top">
          <span>分享到:</span>
          <router-link  to="#"><img src="../../public/img/sukai/qq (1).png" alt=""></router-link>
          <router-link  to="#"><img src="../../public/img/sukai/微博.png" alt=""></router-link>
          <router-link  to="#"><img src="../../public/img/sukai/微信 (3).png" alt=""></router-link>
        </div>
        <div class="content_left_middle">
          <video :src="`${videodetail.videourl}`"
          controls 
          preload='auto'
          :poster="`${videodetail.vhomeimgurl}`"></video>
          <!-- <div class="control">
            <input id="range" type="range" min="0" max="400" >
            <div class="control_group">
              <div class="time">
                <button id="btn_play" style="background:url(../../buplic/img/sukai/视频.png) no-repeat;background-size:10px 10px;">
                  <span >播放</span>
                </button>
                <span class="left"> 00:00</span> /
                <span class="right"> 00:00</span>
              </div>
              <div class="btn_group">
                <button id="btn_vp">音量+</button>
                <button id="btn_vm">音量-</button>
                <button id="">倍速
                  <button id="btn_05">0.5倍速</button>
                  <button id="btn_1">1.0倍速</button>
                  <button id="btn_2">2.0倍速</button>
                </button>
                <button id="btn_fc">全屏显示</button>
              </div>
            </div>
          </div> -->
        </div>
        <div class="content_left_bottom">
          <span  class="btn1">
            <router-link to="#">
              <img src="http://qnm.hunliji.com/o_1alr3t3g02df5tt9omn39krv8.png" alt="">
              <img :src="`${prevdetail.vhomeimgurl}`" alt="">
              <div>
                <p class="video_other"> <上一视频 </p>
                <p class="othervname">{{prevdetail.vname}}</p>
              </div>
            </router-link>
          </span>
          <span class="btn2">
            <router-link to="#">
              <div>
                <p class="video_other"> 下一视频> </p>
                <p class="othervname">{{nextdetail.vname}}</p>
              </div>
              <img :src="`${nextdetail.vhomeimgurl}`" alt="">
              <img src="http://qnm.hunliji.com/o_1alr3t3g0kvun45i6g2l1cj19.png" alt="">
            </router-link>
          </span>
        </div>
      </div>
      <div class="content_right">
        <div class="content_right_top">
          <diV class="content_video_title">
            <p>视频名称</p>
            <p>{{videodetail.vnamr}}</p>
          </diV>
          <div class="content_video_label1">
            <p>视频标签</p>
            <router-link to="#" v-for="(elem,i) of vlabel" :key=i>{{elem}}</router-link>
            <!-- <a href="">梦幻鲜花</a> -->
            <!-- <a href="">白色</a> -->
            <!-- <a href="">灯光婚礼</a> -->
          </div>
          <div class="content_video_class">
            <p>分类</p>
            <router-link to="#">{{videodetail.vtype1}}</router-link>
          </div>
          <div class="content_video_author">
            <p>提供者</p>
            <div>
              <div>
                <img :src="`${videodetail.vavatar}`" alt="">
              </div>
              <div>
                <router-link to="#">{{videodetail.vauthor}}</router-link>
              <p>
              <router-link to="#" style="margin-right:5px;" >作品 {{videodetail.vnumber1}}</router-link>
              <router-link to="#">粉丝 {{videodetail.vnumber2}}</router-link>  
              </p>
              </div>
            </div>
          </div>
          <div class="content_video_look">
            <button><router-link to="#">去查看此案例</router-link></button>
          </div>
        </div>
        <div class="content_right_bottom">
          <div class="content_relativevideo">
            <p>相关视频</p>
            <div>
              <router-link to="#"><img src="http://qnm.hunliji.com/bLRuhXGuv29K4zOuKdjdlZJ_9WE=/lkXpoTgcfRNFrhwkeaeGWGZ1r8uu?vframe/jpg" alt=""></router-link>
              <router-link to="#"><img src="http://qnm.hunliji.com/bLRuhXGuv29K4zOuKdjdlZJ_9WE=/lr5byET6ZLvztcjmlRXjPi5guAWM?vframe/jpg" alt=""></router-link>
              <router-link to="#"><img src="http://qnm.hunliji.com/bLRuhXGuv29K4zOuKdjdlZJ_9WE=/lr5byET6ZLvztcjmlRXjPi5guAWM?vframe/jpg" alt=""></router-link>
              <router-link to="#"><img src="http://qnm.hunliji.com/bLRuhXGuv29K4zOuKdjdlZJ_9WE=/luP7e7iZqrT6pICgpVk19egVTXaD?vframe/jpg" alt=""></router-link>
              <router-link to="#"><img src="http://qnm.hunliji.com/bLRuhXGuv29K4zOuKdjdlZJ_9WE=/ljIZSOsFHBuE-YYFSiE_bY2l33Op?vframe/jpg" alt=""></router-link>
            </div>
          </div>
          <div class="content_video_label2">
            <p>相关标签</p>
            <ul>
              <li v-for="(elem,i) of vlabel" :key=i>
                <router-link to="">{{elem}}</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
</div>
</template>


<script>
import {VoidPath} from '../api/sukai'

export default {
  props:["vid"],
  data(){
    return{
      data:'',
      videodetail:{},
      prevdetail:{},
      nextdetail:{},
      vlabel:[],
    }
  },
  methods:{
    async loadvideo_content(){
      const result = await VoidPath('/vid');
      var vid = parseInt(this.vid);
      result.forEach(element => {
        // console.log(this.vid,typeof(this.vid),typeof(element.vid))

        if(element.vid==vid){
          this.videodetail = element;
          var i = 0;
          for(var k in element){
            if(k.indexOf('vlabel')!=-1&&element[k]!=" "){
              this.vlabel[i]=element[k];
              i++;
            }
          }
        }else if(element.vid==(vid-1)){
          this.prevdetail = element;
        }else if(element.vid==(vid+1)){
          this.nextdetail = element;
        }else{
          return
        }
      });
      document.title = this.videodetail.vname?this.videodetail.vname:"婚礼视频详情";
      // console.log(this.videodetail,this.vlabel,this.prevdetail,this.nextdetail)
    }    
  },
  mounted(){
    this.loadvideo_content();
  }
}
</script>

<style scoped>
*{margin:0px;padding:0px;box-sizing:border-box;}
a:hover{
  color:#f00;
}
.content  a{
  text-decoration:none;
  color:#727272;
}
.content_left a{
  font-size:10px;
}
.content_right a{
  font-size:13px;
}
ul{
  list-style:none;
}
.content{
  width:1200px;
  margin:0 auto;
  /* border:1px solid #f00; */
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
}
/* --------------------------------------------------------------------- */

.content_left{
  /* border:1px solid #f00; */
  width:890px;
}
.content_left_top{
  font-size:13px;
  line-height: 30px;
  margin-bottom: 10px;
}
.content_left_top img{
  margin:0 5px;
  height:30px;
  vertical-align:bottom;
}
/* ------------------------------------------------------------ */
/* 以下为视频播放样式 */
.content_left_middle{
  /* border:1px solid red; */
  width:870px;
  position:relative;
}
.control{
  position:absolute;
  top:375px;
  border:1px solid #fff;
  font-size:15px;
}
.control_group{
  width:870px;
  padding:0px 10px;
  display:flex;
  justify-content:space-between;
  align-items:middle;
  /* line-height:15px; */
}
.content_left_middle video{
  margin:0px;
  width:100%;
}
.content_left_middle .control {
  text-align:center;
}
.content_left_middle input{
  width:100%;
  border:0.1px solid #e8e8e8;
}
#btn_play{
  width:20px;height:20px;
  margin-right:20px;
  background:url(../../public/img/sukai/视频.png) no-repeat;
  background-size:10px 10px;
  position:relative;
}
#btn_play span{
  width:30px;
  margin:0;padding:0;
  position:absolute;
  top:-45px;left:-5px;
  display:none;
}
#btn_play:hover span{
  display:block;
}
/* span .right::after{ */
  /* content:"/"; */
  /* display:inline-block; */
/* } */
/* ------------------------------------------------------------ */
.content_left_bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.content_left_bottom{
  padding:20px 170px;
}
.btn1,.btn2{
  /* width:100px; */
  /* padding:8px 10px; */
  background:rgb(247, 244, 244);
}
.content_left_bottom a{
  border:1px solid #bbb9b9;
  padding:10px 5px;
  display:block;
  width:230px;
  height:75px;
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
}
.btn1 div,.btn2 div{
  width:90px;
  line-height:25px;
}
.btn1 div{
  text-align:left;
}
.btn2 div{
  text-align:right;
}
/* --------------------------------------------------------------------- */
.content_right>div{
  border:1px solid #bbb9b9;
  padding:10px 15px;
  width:280px;
  margin-bottom:20px;
}
.content_right ul{
  list-style:none;
}
.content_right_top>div,.content_right_bottom>div{
  padding:15px 10px;
}
.content_right_top>div+div,.content_right_bottom>div+div{
  border-top:1px dashed #bbb9b9;
}
.content_right p{
  margin:10px 0px;
}
.content_video_title p:not(:first-child) {
  color:#9e9d9d;
  font-size:13px;
}
.content_video_author {
  line-height:20px;
}
.content_video_author>div,.content_relativevideo>div{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
}
.content_video_author img{
  width:40px;
  height:40px;
  border-radius:50%;
  vertical-align: middle;
  margin-right:10px;
}
.content_video_look{
  
  text-align: center;
}
.content_video_look button{
  border:0;
}
.content_video_look a{
  line-height:30px;
  text-align: center;
  border-radius:5px;
  display:block;
  width:150px;height:45px;
  padding:10px 20px;
  color:#fff;
  background:rgb(238, 41, 60);
}
.content_video_class a,.content_video_label1 a,.content_video_label2 a{
  line-height:35px;
  padding:5px;
  border-radius:5px;
}
.content_video_label1 a,.content_video_label2 a{
  border:1px solid #eeecec;
  background:#fff;
  margin-left:5px;

}
.content_video_label1 a:hover,.content_video_label2 a:hover{
  color:red;
  border:1px solid #d80f0f;

}

/* ----------------------------- */
.content_relativevideo>div{
  padding:0px;
  flex-wrap:wrap;
  justify-content:flex-start;
  flex-direction:row;
}
.content_relativevideo a{
  display:block;
  margin-right:1px;
}
.content_video_label2 ul{
  /* line-height: 30px; */
}
.content_video_label2 li{
  display:inline;
  margin:10px;
  line-height: 35px;
}
.othervname{
  display:block;
  height:30px;
  line-height:15px;
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
.video_other{
  text-align:center;
}
</style>

